<template>
  <div class="all-page">
    <!-- 返回按钮 -->
    <el-button type="primary" class="back-button" @click="back">返回上级页面</el-button>

    <!-- 见证记录 -->
    <div class="page">
      <div class="document-header">
        <h1 class="document-title">见证取样记录</h1>
      </div>
      <!-- 基本信息部分 - 在表格上方 -->
      <div>
        <div class="info-row">
          <span class="label">工程名称:</span>
          <span class="value kai-font">{{
            reportData.subprojectName || reportData.projectName || "/"
            }}</span>
        </div>
      </div>
      <table class="main-table">
        <!-- 表头行 -->
        <tr>
          <td class="col-1">样品名称及规格</td>
          <td class="col-2">取样部位</td>
          <td class="col-3">批量</td>
          <td class="col-4">数量(t)</td>
          <td class="col-5">日期(取样)</td>
          <td class="col-6">合格证编号</td>
        </tr>
        <!-- 数据行 -->
        <tr v-for="(item, index) in reportData.steelMaterialList" :key="index">
          <td class="col-1">
            钢筋&nbsp;&nbsp;{{ item.steelType || "/" }}<br />C&nbsp;&nbsp;{{
              item.diameter || "/"
            }}
          </td>
          <td class="col-2">{{ item.usePart || "/" }}</td>
          <td class="col-3">
            {{ item.batchAmount ? item.batchAmount + "组" : "/" }}
          </td>
          <td class="col-4 text-right">{{ item.getAmount || "/" }}</td>
          <td class="col-5">{{ reportData.witnessDate || "/" }}</td>
          <td class="col-6">{{ item.heatBatchNumber || "/" }}</td>
        </tr>
        <!-- 签名行 -->
        <tr>
          <td colspan="2" class="signature-cell">
            <div class="signature-section">
              <div class="signature-line">
                <span class="signature-label">施工单位(签章):</span>
                <span class="special-underline kai-font">{{
                  reportData.shigongCompany || ""
                  }}</span>
              </div>
              <div class="signature-line">
                <span class="signature-label">取样人:</span>
                <span class="special-underline kai-font">{{
                  reportData.sendPerson || ""
                  }}</span>
              </div>
              <div class="date-line">
                <span class="date-label">年&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;日</span>
              </div>
            </div>
          </td>
          <td colspan="4" class="signature-cell">
            <div class="signature-section">
              <div class="signature-line">
                <span class="signature-label">见证单位(签章):</span>
                <span class="special-underline kai-font">{{
                  reportData.witnessCompany || ""
                  }}</span>
              </div>
              <div class="signature-line">
                <span class="signature-label">见证人:</span>
                <span class="special-underline kai-font">{{
                  reportData.witnessPerson || ""
                  }}</span>
              </div>
              <div class="date-line">
                <span class="date-label">年&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;日</span>
              </div>
            </div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import router from "@/router";

export default {
  data() {
    return {
      loading: true, // 这是一个加载标识
      reportData: {}, // 这是报表数据接收变量
      localStorageId: "", // 用于存储id
      taskId: "",
    };
  },
  async mounted() {
    const localStorageId = this.$route.query.localStorageId;
    this.localStorageId = localStorageId; // 保存id用于销毁时清理
    if (localStorageId) {
      const data = localStorage.getItem(localStorageId);
      if (data) {
        this.reportData = JSON.parse(data);
        this.taskId = this.reportData.taskId;
        console.log(this.reportData);
        console.log("taskId为:" + this.taskId);
      }
    }
  },
  beforeDestroy() {
    // 这个钩子函数用来退出的时候清除本地存储的数据 防止数据堆积在浏览器里
    if (this.localStorageId) {
      localStorage.removeItem(this.localStorageId);
    }
    document
      .querySelector("body")
      .setAttribute("style", "background-color: white;"); // 还原，因为这是个全局样式
  },
  beforeCreate() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#f5f5f5;"); // 设置对比色
  },
  methods: {
    back() {
      router.push({ path: "/menus/statement" });
    },
  },
};
</script>

<style scoped>
.all-page {
  width: 100%;
  padding-bottom: 5%;
}

/* 返回按钮样式 */
.back-button {
  position: fixed;
  top: 1.5rem;
  left: 6.25rem;
  z-index: 1000;
  background-color: #409eff;
  border-color: #409eff;
  color: white;
  font-size: 0.875rem;
  padding: 0.625rem 1.25rem;
  border-radius: 0.25rem;
  cursor: pointer;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
}

.back-button:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.page {
  font-family: "Times New Roman", "宋体", sans-serif;
  padding: 4% 4% 0;
  width: 60%;
  aspect-ratio: 1 / 1.414;
  margin: 5% auto;
  background-color: white;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
  line-height: 1.25rem;
}

.document-header {
  text-align: center;
  margin-bottom: 5%;
}

.document-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  padding: 2% 0;
}

.info-row {
  padding-left: 2%;
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
  align-items: center;
}

.label {
  font-weight: bold;
  white-space: nowrap;
}

.value {
  margin-right: 3%;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.blank-box {
  display: inline-block;
  width: 3rem;
}

.kai-font {
  font-family: "Times New Roman", "楷体", "KaiTi", "STKaiti", sans-serif;
  font-size: 0.9375rem;
}

.main-table {
  width: 100%;
  border-collapse: collapse;
  border: 0.18rem solid #000;
}

.main-table td {
  border: 0.1rem solid #000;
  padding: 1.5%;
  text-align: center;
  vertical-align: middle;
  word-wrap: break-word;
  white-space: normal;
  word-break: break-all;
}

.main-table td:nth-child(3) {
  width: 120px;
  min-width: 100px;
}

.main-table td:nth-child(4) {
  width: 120px;
  min-width: 100px;
}

/* 列宽控制 */
.main-table td.col-1 {
  width: 30%;
}

.main-table td.col-2 {
  width: 20%;
}

.main-table td.col-3 {
  width: 8%;
}

.main-table td.col-4 {
  width: 8%;
}

.main-table td.col-5 {
  width: 14%;
}

.main-table td.col-6 {
  width: 20%;
}

/* 签名部分样式 */
.signature-cell {
  text-align: left !important;
  padding: 3% !important;
  height: 8rem;
  vertical-align: top;
}

.signature-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
}

.signature-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2rem;
}

.signature-label {
  font-weight: bold;
  white-space: nowrap;
}

.special-underline {
  border-bottom: 0.0938rem solid #333;
  padding: 0 1rem 0.125rem;
  border-radius: 0.0625rem;
  min-height: 1.45831rem;
  min-width: 4.0313rem;
}

.date-line {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

.date-label {
  font-weight: bold;
  font-size: 1.1rem;
  letter-spacing: 0.5rem;
}
</style>
